<template>
  <div class="macarons" style="width: 100%; height: 170px" />
</template>

<script>
import echarts from 'echarts';
import { agencyInfo } from '@/api/home';
require('echarts/theme/macarons'); // echarts theme
import resize from '../components/mixins/resize';

export default {
  mixins: [resize],
  props: {
    listQuery: {
      type: Object
    }
  },
  data() {
    return {
      chart: null,
      list: []
    };
  },
  mounted() {
    this.getAgencyInfo();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getAgencyInfo() {
      const res = await agencyInfo(this.listQuery);
      if (res.data.code === 200) {
        this.list = res.data.data;
        this.initChart();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)<br/>'
        },
        legend: {
          top: '30%',
          right: '10',
          orient: 'vertical',
          icon: 'pin',
          formatter: '{name}'
        },
        grid: {
          left: '4%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            label: {
              show: true,
              formatter(param) {
                return param.percent + '%';
              },
              fontSize: 14,
              position: 'outer',
              algin: 'left',
              margin: 0,
              color: '#666666'
            },
            labelLine: {
              show: false,
              length: 5,
              length2: 5
            },
            avoidLabelOverlap: true,
            left: 0,
            data: this.list,
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            }
          }
        ]
      });
    }
  }
};
</script>
